<template>
  <div class="webapp-box">
    <div class="seckill">
      <div class="header">
        <div class="header-l-item seckill-text">限时秒杀</div>
        <div class="header-l-item time">
          <span>剩余: </span>
          <div class="time-item">{{ h }}</div>
          <span class="font-active-color point">时</span>
          <div class="time-item">{{ m }}</div>
          <span class="font-active-color point">分</span>
          <div class="time-item">{{ s }}</div>
          <span class="font-active-color point">秒</span>
        </div>
      </div>
      <div>
        <div class="commodity">
          <div class="commodity-item" v-for="item in seckillList"
               :key="item.id">
            <img class="commodity-cover" :src="item.cover">
            <div class="commodity-content">
              <div class="price-box">
                <span class="price-prefix">¥</span>
                <span class="orignal-price">{{ item.price }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'mallSeckill',
  data() {
    return {
      h: 12,
      m: 20,
      s: '02',
      seckillList: [
        {
          "id": 1,
          "promotionId": null,
          "promotionSessionId": null,
          "skuId": 1647526959381667800,
          "seckillPrice": 998,
          "count": 10,
          "limited": 1,
          "sort": 1,
          "randomCode": "bb3095f51b794f97867895059fbd073a",
          "spuId": 1647526954621132800,
          "skuName": null,
          "skuDesc": null,
          "brandId": null,
          "cover": "https://leron-public.oss-cn-qingdao.aliyuncs.com/xymall/643ba80bbdb42ef8f0abd791.jpg",
          "price": 998,
          "startTime": "2023-06-22 10:00:00",
          "endTime": "2023-06-30 11:00:00"
        },
        {
          "id": 2,
          "promotionId": null,
          "promotionSessionId": null,
          "skuId": 1647526959998230500,
          "seckillPrice": 398,
          "count": 1,
          "limited": 1,
          "sort": 0,
          "randomCode": "4b604b88440240cab270e6db54dbda04",
          "spuId": 1647526954621132800,
          "skuName": null,
          "skuDesc": null,
          "brandId": null,
          "cover": "https://leron-public.oss-cn-qingdao.aliyuncs.com/xymall/643ba80bbdb42ef8f0abd791.jpg",
          "price": 398,
          "startTime": "2023-06-22 10:00:00",
          "endTime": "2023-06-30 11:00:00"
        }
      ]
    }
  }
}
</script>

<style scoped>
.webapp-box {
  width: 320px;
  height: 150px;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #F7F7F7;
  margin: 0 auto;
}

.seckill {
  margin: 10px auto;
  width: 95%;
  height: 130px;
  color: white;
  background-color: #FF6A6C;
  border-radius: 5px;
  padding: 10px;
}

.commodity {
  margin-top: 10px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
}

.commodity-item {
  width: 75px;
  margin-left: 5px;
}

.price-prefix {
  color: #FFF;
  font-size: 8px;
  font-weight: 700;
  padding: 1px;
}

.price-box {
  margin-top: 1px;
}

.orignal-price {
  font-weight: 500;
  color: #FFF;
  font-size: 14px;
}

.commodity-cover {
  width: 100%;
  height: 65px;
}

.commodity-content {
  text-align: center;
}

.seckill-text {
  font-size: 12px;
  font-weight: 500;
}

.time {

}

.point {
  font-weight: bold;
  margin: 0 1px;
}

.session {
  color: #FF4E4C;
  font-weight: bold;
  font-size: 12px;
}

.more-seckill {
  width: 15px;
  height: 15px;
}

.more-item {
  display: inline-block;
}

.time-item {
  display: inline-block;
  padding: 2px;
  border-radius: 3px;
  width: 20px;
  text-align: center;
  background-color: #FFF;
  color: #FD5242;
}

.header {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.header-left {
  width: 65%;
  display: flex;
  justify-content: space-between;
}

.header-l-item {
  display: inline-block;
}

</style>
